<script lang="ts">
	import { EDGE_TYPE } from '$lib/api/proto/roadmap_data_api';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { roadmapStore } from '../store.svelte';

	const tmpEditEdge = roadmapStore.edgeList.find(
		(item) =>
			item.edgeKey != undefined &&
			roadmapStore.editEdge != null &&
			item.edgeKey.fromNodeId == roadmapStore.editEdge.fromNodeId &&
			item.edgeKey.fromHandle == roadmapStore.editEdge.fromHandle &&
			item.edgeKey.toNodeId == roadmapStore.editEdge.toNodeId &&
			item.edgeKey.toHandle == roadmapStore.editEdge.toHandle
	);

	let edgeType = $state(tmpEditEdge?.basicInfo?.edgeType ?? EDGE_TYPE.EDGE_TYPE_BEZIER);
	let label = $state(tmpEditEdge?.basicInfo?.label ?? '');
	let hasStartArrow = $state(tmpEditEdge?.basicInfo?.hasStartArrow ?? false);
	let hasEndArrow = $state(tmpEditEdge?.basicInfo?.hasEndArrow ?? false);

	let tabKey = $state('edit' as 'edit' | 'remove');

	async function updateEdge() {
		if (userStore.userSession == null || roadmapStore.editEdge == null) {
			return;
		}
		await callApi(
			appStore.roadmapDataApiClient.updateEdge({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				edgeKey: roadmapStore.editEdge,
				basicInfo: {
					edgeType: edgeType,
					label: label,
					hasStartArrow: hasStartArrow,
					hasEndArrow: hasEndArrow
				}
			}).response
		);
		await roadmapStore.onUpdateEdge(roadmapStore.editEdge);
		roadmapStore.editEdge = null;
	}

	async function removeEdge() {
		if (userStore.userSession == null || roadmapStore.editEdge == null) {
			return;
		}
		await callApi(
			appStore.roadmapDataApiClient.removeEdge({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				edgeKey: roadmapStore.editEdge
			}).response
		);
		roadmapStore.onRemoveEdge(roadmapStore.editEdge);
		roadmapStore.editEdge = null;
	}
</script>

<dialog class="modal modal-open">
	<div class="modal-box">
		<button
			class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
			onclick={() => (roadmapStore.editEdge = null)}>✕</button
		>
		<h3 class="text-lg font-bold">修改/删除连接</h3>
		<div role="tablist" class="tabs tabs-lift">
			<button
				role="tab"
				class="tab {tabKey == 'edit' ? 'tab-active' : ''}"
				onclick={() => (tabKey = 'edit')}>编辑</button
			>
			{#if tabKey == 'edit'}
				<div class="tab-content bg-base-100 border-base-300 p-6 pt-0">
					<div class="max-h-[60vh] overflow-y-auto pr-[10px] flex-col space-y-4 pt-[20px]">
						<label class="label w-full">
							<span class="label w-[100px] text-right inline-block pr-[10px]">标签:</span>
							<input type="text" class="input w-full" bind:value={label} />
						</label>
						<label class="label w-full">
							<span class="label w-[100px] text-right inline-block pr-[10px]">连接类似:</span>
							<select class="select w-full" bind:value={edgeType}>
								<option value={EDGE_TYPE.EDGE_TYPE_BEZIER}>贝塞尔曲线</option>
								<option value={EDGE_TYPE.EDGE_TYPE_SMOOTH_STEP}>平滑折线</option>
								<option value={EDGE_TYPE.EDGE_TYPE_STEP}>折线</option>
								<option value={EDGE_TYPE.EDGE_TYPE_STRAIGHT}>直线</option>
							</select>
						</label>
						<label class="label w-full">
							<span class="label w-[100px] text-right inline-block pr-[10px]">箭头:</span>
							<div class="w-full flex gap-4">
								<label class="label">
									<input type="checkbox" bind:checked={hasStartArrow} class="checkbox" />
									开始
								</label>
								<label class="label">
									<input type="checkbox" bind:checked={hasEndArrow} class="checkbox" />
									结束
								</label>
							</div>
						</label>
					</div>
				</div>
			{/if}
			<button
				role="tab"
				class="tab bg-error text-error-content [--tab-bg:var(--color-error)] {tabKey == 'remove'
					? 'tab-active'
					: ''}"
				onclick={() => (tabKey = 'remove')}>危险操作</button
			>
			{#if tabKey == 'remove'}
			<div class="tab-content bg-base-100 border-base-300 p-4 pt-0">
				<div class="flex justify-center pt-[20px] pb-[20px]">
				<button class="btn btn-error" onclick={() => removeEdge()}>删除连接</button>
			</div>
			</div>
			{/if}
		</div>

		{#if tabKey == 'edit'}
			<div class="modal-action">
				<button class="btn" onclick={() => (roadmapStore.editEdge = null)}>取消</button>
				<button class="btn btn-primary" onclick={() => updateEdge()}>修改</button>
			</div>
		{/if}
	</div>
	<div class="modal-backdrop">
		<button onclick={(roadmapStore.editEdge = null)}>close</button>
	</div>
</dialog>
